<template>
  <div>
    <!-- 丰富模式 -->
    <el-row class="question-row" v-if="!simpleModel">
      <el-col :span="2"><b>ID:</b>{{ question.id }}</el-col>
      <el-col :span="22">
        <b>题干信息：</b>
        <el-link
          class="question-name"
          @click="showInfo(question)"
          type="primary"
          v-html="question.question"
        ></el-link>
      </el-col>
      <el-col :span="10"><b>试题编号:</b>{{ question.quest_num }}</el-col>
      <el-col :span="4"
        ><b>试题类型:</b>{{ question.quest_type | showQuestType }}
      </el-col>
      <el-col :span="5"><b>归属学科:</b>{{ question.subject_name }} </el-col>
      <el-col :span="5"><b>归属目录:</b>{{ question.directory_name }} </el-col>
      <el-col :span="10"
        ><b>标签信息:</b>
        <span v-for="item in question.tag_info" :key="item"
          >{{ item }}&nbsp;</span
        >
      </el-col>
      <el-col :span="4"
        ><b>发布状态:</b>
        <el-tag size="small" v-if="question.show_state == 1" type="success"
          >上架</el-tag
        >
        <el-tag size="small" v-if="question.show_state == 2" type="info"
          >下架</el-tag
        >
      </el-col>
      <el-col :span="5"
        ><b>审核人:</b>{{ question.check_username || '暂无' }}
      </el-col>
      <el-col :span="5"
        ><b>审核状态:</b>
        <el-tag size="small" v-if="question.check_state == 1" type="warning"
          >待审核</el-tag
        >
        <el-tag size="small" v-if="question.check_state == 2" type="success"
          >通过</el-tag
        >
        <el-tag size="small" v-if="question.check_state == 3" type="danger"
          >不通过</el-tag
        >
      </el-col>
      <el-col :span="10"
        ><b>审核意见:</b>
        {{ question.check_remarks || '暂无' }}
      </el-col>
      <el-col :span="4"><b>创建人:</b>{{ question.create_name }} </el-col>
      <el-col :span="5"
        ><b>难度:</b>
        <span v-if="question.difficulty == 1">简单</span>
        <span v-if="question.difficulty == 2">中等</span>
        <span v-if="question.difficulty == 3">较难</span>
      </el-col>
      <el-col :span="5"
        ><b>发布时间:</b>{{ question.created_at | formatTime }}
      </el-col>
    </el-row>
    <!-- 简洁模式 -->
    <el-row v-else class="question-row">
      <el-col :span="2"><b>ID:</b>{{ question.id }}</el-col>
      <el-col :span="22">
        <b>题干信息：</b>
        <el-link
          class="question-name"
          @click="showInfo(question)"
          type="primary"
          v-html="question.question"
        ></el-link>
      </el-col>
      <el-col :span="4"><b>归属学科:</b>{{ question.subject_name }} </el-col>
      <el-col :span="4"><b>归属目录:</b>{{ question.directory_name }} </el-col>
      <el-col :span="7"
        ><b>标签信息:</b>
        <span v-for="item in question.tag_info" :key="item"
          >{{ item }}&nbsp;</span
        >
      </el-col>
      <el-col :span="4"
        ><b>发布状态:</b>
        <el-tag size="small" v-if="question.show_state == 1" type="success"
          >上架</el-tag
        >
        <el-tag size="small" v-if="question.show_state == 2" type="info"
          >下架</el-tag
        >
      </el-col>
      <el-col :span="4"
        ><b>发布时间:</b>{{ question.created_at | formatTime }}
      </el-col>
    </el-row>

    <!-- 试题预览组件 -->
    <question-preview
      v-model="previewShow"
      v-if="previewShow"
      :question="previewInfo"
    ></question-preview>
  </div>
</template>

<script>
import QuestionPreview from './QuestionPreview'
export default {
  components: {
    QuestionPreview,
  },
  name: 'QuestionItem',
  props: {
    // 试题信息
    question: {
      type: Object,
      require: true,
    },
    // 简洁模式
    simpleModel: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      previewShow: false, // 试题预览显示
      previewInfo: {}, // 预览试题内容
    }
  },
  methods: {
    // 试题预览显示
    showInfo(val) {
      this.previewShow = true
      this.previewInfo = val
    },
  },
}
</script>

<style scoped>
.question-row {
  line-height: 30px;
}
.question-row b {
  color: #aaa;
  font-weight: normal;
  margin-right: 5px;
}
.question-name {
  height: 20px;
  overflow: hidden;
}
</style>
